<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom事件探秘</title>
</head>
<style>
	input[type='button']{
		padding: 10px;
		margin: 20px;
		outline: none;
		border-radius: 20px/8px;
		background-color: #1296db;
		border: 0;
		cursor: pointer;
		color: #fff;
	}
	#box{
		width: 150px;
		height: 100px;
		border: 2px solid gray;
	}
	a{
		text-decoration-line: none;
		text-decoration: none;
		background-color: #fff;
		border: 1px solid blue;
		border-radius: 2px;
		padding: 2px;
	}
	#panel{
		width: 380px;
		height: 240px;
		background-color: #ddd;
		position: relative;
		margin: 30px auto;
		text-align: center;
	}
	#panel:after{
		content: '';
		position: absolute;
		top: 14px;
		bottom: 14px;
		right: 38px;
		left: 38px;
		background-color: red;
		transform: rotateZ(3deg) skew(20deg);
		box-shadow: 0 0 10px 8px gray;
		z-index: -1

	}

	#panel:before{
		content: '';
		position: absolute;
		top: 14px;
		bottom: 14px;
		right: 38px;
		left: 38px;
		background-color: red;
		transform: rotateZ(-3deg) skew(-20deg);
		box-shadow: 0 0 10px 8px gray;
		z-index: -1

	}
	#panel header{
		height: 50px;
		background: linear-gradient(to left,red,purple,yellow);
		cursor: move;
	}
	#panel input{
		height: 30px;
		width: 200px;
		margin: 10px;
		border-radius: 5px;
		outline: none;
		background: #dfdfdf;
		text-align: center;
	}
	#panel span{
		position: absolute;
		width: 28px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		border-radius: 50%;
		top: 12px;
		right: 20px;
		font-weight: 800;
		color: #fff;
		cursor: pointer;
		background: rgba(23,23,123,.3);

	}
	#panel select{
		width: 30%;
		height: 30px;
		margin: 30px;
		margin-left: 220px;
		background: #dfdfdf;
		border: none;
		outline: none;
		text-align: center;

	}
</style>
<body><!-- 
	js--事件--dom
	理解事件流==描述页面接收事件的的顺序=冒泡和捕获
	冒泡：由最具体的元素接收事件，逐级向上传播至最不具体的节点
	捕获：不太具体的节点更早的接收事件

	html事件处理程序--html和js耦合过高
	DOM0级事件处理：函数赋值给一个事件的处理程序属性(简单，跨浏览器)
	DOM2级事件处理：
		addEventListener(fnName,eventTag,boolean) 
		IE:attachEvent detachEvent：要on监听和执行函数两个参数..
	跨浏览器事件处理
		addEventLister||attachEvent
	使用事件处理程序 
	事件对象：event DOM中的事件对象 
		mouseEvent ==>path..input-div-body-html-document-window
		html中event算关键字???js中随便指定???
		type-事件类型-target-事件目标-stopPropagation-阻止事件冒泡
		当前事件处理完后event.stopPropagation
		阻止事件的默认行为 preventDefault();
		IE中的事件对象 IE8前应该
		 type srcElement ||target event前加window
		 cancelBubble returnValue
	不同事件类型


-->
<div id="box" onclick="alert('别闹,崽子们！')">
	<input type="button" id="btn" value="button" onclick="console.log('hello events');dm2(event);event.stopPropagation();">
	<a href="http://www.baidu.com" onclick="alert('点A干嘛！');event.preventDefault();event.stopPropagation()">baidu</a>
</div>
<div id="panel">
	<header id="header"></header>
	<span id="span">X</span>
	<input type="text" placeholder="NAME"><input type="text" placeholder="PASSWORD">
	<select name="" id="">
		<option value="">on</option>
		<option value="">off</option>
		<option value="">busy</option>
		<option value="">stealth</option>
	</select>
</div>
</body>
<script>
	document.getElementById('btn').onmouseover=function () {
		console.log('dom零级处理—onmouseover');
	};
	document.getElementById('btn')[onmouseover]=function () {
		console.log('dom零级处理—onmouseover-2');
	};
	document.getElementById('btn').onmouseleave=function() {
		if(!document.getElementById('btn').onmouseover)
			return
		console.log('remove-onmouseover');
		console.log('try-remove-onmousenter');

		document.getElementById('btn').onmouseover=null;
		document.getElementById('btn').onmouseenter=null;
	};
	document.getElementById('btn').addEventListener('mouseenter',dm2,false);
	function dm2(eve) {
		console.log('DOM2级事件处理——mouseenter-不能要on');
		ht.style.display='block';
		console.log(eve);
	}
	// 监听多个事件 
	// 匿名函数好像移除不了
	// document.getElementById('btn').removeEventListener('mouseenter',dm2,false);
		var hd=document.getElementById('header');
		var ht=document.getElementById('panel');
		// clientX clientY 鼠标相对窗口的位置
		hd.onmousedown=function(e){
			var xx=e.clientX;
			var yy=e.clientY;
			// offsetLeft Top 相对定位元素的位置...
				console.log(ht.offsetLeft)
				console.log(ht.offsetTop)
				console.log(xx)
				console.log(yy)

			document.onmousemove=function(e){
			ht.style.left=e.clientX-xx+'px';
			console.log(e.clientX-xx+'px');
			ht.style.top=e.clientY-yy+'px';
			}

		}
		window.onmouseup=function(e){
			document.onmousemove=null;
		}
		document.getElementById('span').onclick=function function_name(argument) {
				ht.style.display='none';
		};
	function drag(){

	}
</script>
</html>